<template>
  <div class="question-item-main-container">
    <template v-if="questionDetail.questionType === 'choice'">
      <el-row class="q_header">
        <div class="q_subject">
          <label class="sub_red">*&nbsp;&nbsp;&nbsp;</label>
          <label v-if="!hide">{{ questionDetail.indexOrder }}.&nbsp;&nbsp;&nbsp;</label>
          <label class="sub_name">{{ questionDetail.caption }}</label>
        </div>
        <div class="q_choose">
          <el-radio-group v-model="checked">
            <el-radio
              v-for="item in allQuestionDetailItemList"
              :key="item.indexOrder"
              :label="item.indexOrder"
              disabled
            >{{ item.optionName }}</el-radio>
          </el-radio-group>
        </div>
        <el-row v-if="btnVisible" class="btn_oper" style="float:right;padding-right:6px;padding-bottom:2px;">
          <el-button type="success" size="mini" @click="dialogVisible=true">修改</el-button>
          <el-button type="info" size="mini" @click.stop="handleUpItem">上移</el-button>
          <el-button type="warning" size="mini" @click.stop="handleDownItem">下移</el-button>
          <el-button type="primary" size="mini" @click="handleLogic">显示逻辑</el-button>
          <el-button type="danger" size="mini" @click="handleDeleteQuestion">删除</el-button>
        </el-row>
      </el-row>
    </template>
    <template v-if="questionDetail.questionType === 'multiple-choice'">
      <el-row class="q_header">
        <div class="q_subject">
          <label class="sub_red">*&nbsp;&nbsp;&nbsp;</label>
          <label v-if="!hide">{{ questionDetail.indexOrder }}.&nbsp;&nbsp;&nbsp;</label>
          <label class="sub_name">{{ questionDetail.caption }}</label>
        </div>
        <div class="q_choose">
          <el-checkbox-group v-model="chk_choose">
            <el-checkbox
              v-for="item in allQuestionDetailItemList"
              :key="item.indexOrder"
              :label="item.indexOrder"
              disabled
            >{{ item.optionName }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <el-row v-if="btnVisible" class="btn_oper" style="float:right;padding-right:6px;padding-bottom:2px;">
          <el-button type="success" size="mini" @click="dialogVisible=true">修改</el-button>
          <el-button type="info" size="mini" @click.stop="handleUpItem">上移</el-button>
          <el-button type="warning" size="mini" @click.stop="handleDownItem">下移</el-button>
          <el-button type="primary" size="mini" @click="handleLogic">显示逻辑</el-button>
          <el-button type="danger" size="mini" @click="handleDeleteQuestion">删除</el-button>
        </el-row>
      </el-row>
    </template>
    <template v-if="questionDetail.questionType === 'fill-blank'">
      <el-row class="q_header">
        <div class="q_subject">
          <label class="sub_red">*&nbsp;&nbsp;&nbsp;</label>
          <label v-if="!hide">{{ questionDetail.indexOrder }}.&nbsp;&nbsp;&nbsp;</label>
          <label class="sub_name">{{ questionDetail.caption }}</label>
        </div>
        <div class="q_choose">
          <span v-for="item in allQuestionDetailItemList" :key="item.indexOrder" class="q_choose_fillback">
            <template v-if="item.optionClass === 'next-line'">
              <br>
            </template>
            <template v-else>
              <template v-if="item.optionClass === 'date'">
                <el-date-picker
                  size="mini"
                  type="date"
                  placeholder="选择日期"
                  :readonly="true"
                  style="width:140px;"
                />
              </template>
              <template v-else>
                {{ item.optionName }}
              </template>
            </template>
          </span>
        </div>
        <el-row v-if="btnVisible" class="btn_oper" style="float:right;padding-right:6px;padding-bottom:2px;">
          <el-button type="success" size="mini" @click="dialogVisible=true">修改</el-button>
          <el-button type="info" size="mini" @click.stop="handleUpItem">上移</el-button>
          <el-button type="warning" size="mini" @click.stop="handleDownItem">下移</el-button>
          <el-button type="primary" size="mini" @click="handleLogic">显示逻辑</el-button>
          <el-button type="danger" size="mini" @click="handleDeleteQuestion">删除</el-button>
        </el-row>
      </el-row>
    </template>
    <template v-if="questionDetail.questionType === 'explain'">
      <el-row class="q_header">
        <div class="q_paragraph_explain">
          <div v-html="questionDetail.caption" />
        </div>
        <el-row v-if="btnVisible" class="btn_oper" style="float:right;padding-right:6px;padding-bottom:2px;">
          <el-button type="success" size="mini" @click="dialogVisible=true">修改</el-button>
          <el-button type="info" size="mini" @click.stop="handleUpItem">上移</el-button>
          <el-button type="warning" size="mini" @click.stop="handleDownItem">下移</el-button>
          <el-button type="danger" size="mini" @click="handleDeleteQuestion">删除</el-button>
        </el-row>
      </el-row>
    </template>
    <!-- 模态框 -->
    <div style="clear:both;">
      <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="false">
        <chooseTable :question-detail="questionDetail" @close="handledialogVisible" />
      </el-dialog>
    </div>
    <!-- 模态框 -->
    <div style="clear:both;">
      <el-dialog title="显示逻辑设置" :visible.sync="questionLogicVisible" :close-on-click-modal="false" :show-close="false">
        <questionLogic :question="question" :question-detail="questionDetail" @close="questionLogicVisible=false" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import ChooseTable from '@/components/ChooseTable'
import QuestionLogic from './question-logic.vue'
export default {
  name: 'QuestionItem',
  components: { ChooseTable, QuestionLogic },
  props: {
    hide: Boolean,
    btnVisible: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    questionDetail: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    },
    question: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      checked: '',
      dialogVisible: false,
      title: '修改',
      chk_choose: [],
      questionLogicVisible: false
    }
  },
  computed: {
    allQuestionDetailItemList: function() {
      return !this.questionDetail || !this.questionDetail.questionDetailItemList
        ? []
        : this.questionDetail.questionDetailItemList
    },
    firstQuestionDetailItem: function() {
      return !this.questionDetail || !this.questionDetail.questionDetailItemList ||
        this.questionDetail.questionDetailItemList.length === 0
        ? {}
        : this.questionDetail.questionDetailItemList[0]
    }
  },
  mounted: function() {
  },
  methods: {
    handledialogVisible(cancel) {
      this.dialogVisible = false
    },
    handleDeleteQuestion(id) {
      this.$emit('delete')
    },
    handleUpItem() {
      this.$emit('up')
    },
    handleDownItem() {
      this.$emit('down')
    },
    handleLogic() {
      this.questionLogicVisible = true
    }
  }
}
</script>

<style lang="scss" scope>
.question-item-main-container {
  div.q_choose .el-radio-group label {
    display: block;
    line-height: 24px;
  }
  div.q_choose .el-checkbox-group label {
    display: block;
    line-height: 24px;
  }
}
</style>
